﻿@{
    ViewData["Title"] = "订单管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section css{
    <style type="text/css">
        .layui-table-body .layui-table-cell {
            height: 58px;
            line-height: 58px;
        }

        .layui-table-page select {
            height: 20px;
        }

        .tab-img {
            height: 60px;
            width: 60px;
            border-radius: 2px;
            margin-right: 10px;
        }

        .layui-input-block {
            width: 130px;
        }
    </style>
}
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">订单号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="orderNo" autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" required>订单状态</label>
                            <div class="layui-input-block">
                                <select id="orderStatus" lay-search="">
                                    <option value="">全部</option>
                                    <option value="10">新订单</option>
                                    <option value="20">已取消</option>
                                    <option value="30">已完成</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" required>付款状态</label>
                            <div class="layui-input-block">
                                <select id="payStatus" lay-search="">
                                    <option value="">全部</option>
                                    <option value="10">待付款</option>
                                    <option value="20">已付款</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" required>发货状态</label>
                            <div class="layui-input-block">
                                <select id="deliveryStatus" lay-search="">
                                    <option value="">全部</option>
                                    <option value="10">待收货</option>
                                    <option value="20">已收货</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" required>收货状态</label>
                            <div class="layui-input-block">
                                <select id="receiptStatus" lay-search="">
                                    <option value="">全部</option>
                                    <option value="10">待发货</option>
                                    <option value="20">已发货</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="detail" onclick="existAuth('detail')">详情</a>
        </script>
    </div>
</div>
@section js{
    <script>
        layui.use(['form', 'table', 'common'], function () {
            var form = layui.form,
                table = layui.table,
                apiUtil = layui.common;
            //layui button onclick必须这样写，不然会出现事件未定义；
            window.existAuth = function (btnName) {
                apiUtil.checkAuth("order", btnName, event);
            };
            apiUtil.render({
                elem: '#currentTableId',
                url: 'order/GetListPages',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                authorizeFields: true, // 字段权限开关
                overflow: { // 默认所有表格都超出
                    type: 'tips'
                    , hoverTime: 300 // 悬停时间，单位ms, 悬停 hoverTime 后才会显示，默认为 0
                    , color: 'black' // 字体颜色
                    , bgColor: 'white' // 背景色
                    , header: true, // 表头支持 overflow
                    total: true // 合计行支持 overflow
                },
                cols: [[
                    { type: "checkbox", rowspan: "2", fixed: "left" },//多选框,fixed:"left"固定在左边
                    { field: "orderNo", rowspan: "2", title: "订单号", width: 130 },
                    { field: "appUserName", rowspan: "2", title: "买家", width: 90 },
                    {
                        field: "totalNum", rowspan: "2", title: "数量单价", templet: function (res) {
                            return res.totalNum + "*" + res.goodsPrice;
                        }
                    },
                    { field: "totalPrice", rowspan: "2", title: "付款", align: "center" },
                    { colspan: "2", title: "商品信息", align: "center" },
                    { colspan: "4", title: "交易状态", align: "center" },
                    { rowspan: "2", title: '操作', templet: '#tool' }
                ], [
                    {
                        field: "goodsName", title: "商品名称", align: "left", width: 260, templet: function (res) {

                            if (res.imgUrl != null && res.imgUrl != "" && res.imgUrl != undefined) {

                                return '<a href=' + res.imgUrl + ' target="_blank"><img class="tab-img" src=' + res.imgUrl + '>' + res.goodsName + '</a>';
                            }
                            else {
                                return "没图";
                            }
                        }
                    },
                    { field: 'createTime', width: 160, title: '创建时间', align: "center" },
                    {
                        field: "payStatusText", title: "支付状态", align: "center"
                    },
                    {
                        field: "deliveryStatusText", rowspan: "2", title: "发货状态", align: "center"
                    },
                    {
                        field: "receiptStatusText", rowspan: "2", title: "收货状态", align: "center"
                    },
                    {
                        field: "orderStatusText", title: "订单状态", align: "center"
                    },
                ]],
                parseData: function (res) {
                    return apiUtil.parseDataFun(res);
                }
            });

            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                // var result = JSON.stringify(data.field);
                //执行搜索重载
                table.reload('currentTableId', {
                    page: {
                        curr: 1
                    }
                    , where: {
                        key: data.field.orderNo,
                        orderStatus: data.field.orderStatus,
                        payStatus: data.field.payStatus,
                        deliveryStatus: data.field.deliveryStatus,
                        receiptStatus: data.field.receiptStatus,
                    }
                }, 'data');
                return false;
            });

            /**
        * toolbar事件监听
        */
            table.on('toolbar(currentTableFilter)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    var content = '/Order/Detail?id=' + data.id;
                    layer.open({
                        title: '订单详情',
                        type: 2,
                        shade: 0.2,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        zIndex: "10000",
                        content: content,
                        end: function () {
                            refeshTable();
                        }
                    });

                }
            });
        });
    </script>
}
